<template>
    <div class="wrap">
        <el-dialog :title="$t('message.EletronicInfoTool.omittedDataList')"
                   :visible.sync="dialogVisible"
                   :close-on-click-modal="false">
            <el-tag style="font-size: 13px;font-weight: bolder">{{dialogMsg}}</el-tag>
            <el-table class="table"
                      :data="tableData"
                      ref="tableData"
                      max-height="400px"
                      highlight-current-row
                      border
                      v-bind:style="{ height: tableData.length?'400px' : '100px' }">
                <el-table-column
                    prop="displayName"
                    header-align="center"
                    :label="$t('message.EletronicInfoTool.nodeName')"
                    min-width="200"/>
            </el-table>
            <div class="btn">
                <el-button type="primary" @click="forceConfirm">{{ $t('message.EletronicInfoTool.forceConfirm') }}</el-button>
                <el-button type="primary" @click="cancel">{{ $t('message.EletronicInfoTool.cancelAndContinueChoose') }}</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import DialogMixin from "../DialogMixin";
import {electricalCommand} from "../../../command/ElectricalCommand";

export default {
    name: "LeakItemList",
    mixins: [DialogMixin],
    props:{
        dialogMsg: {
            type: String,
            default: '',
        },
        dialogVisible: {
            type: Boolean,
            default: false
        },
        omittedTableData: {
            type: Object,
            default: null
        }
    },
    data(){
        return{
            tableData:[],
        }
    },
    mounted(){
        electricalCommand.init(1500, 1200, 1500, () => {

        })
    },
    methods:{
        forceConfirm(){
           this.$emit('confirm-dialog');
        },
        cancel(){
            this.$emit('close-dialog');
        },
    },
    watch: {
        omittedTableData:{
            handler(newVal) {
                this.tableData = newVal;
            }
        }
    },
}
</script>

<style scoped>
>>> .el-dialog{
    margin-top: 5vh !important;
    width: 60%;
}
>>> .el-table th .cell {
    font-size: 13px;
}
</style>